<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style></style>
  </head>
  <body>
    <div id="content">
      外层div元素
      <span>内层span元素</span>
      外层div元素
    </div>

    <button id="btn">点击我</button>
    <button id="delAll">删除所有绑定事件</button>
    <button id="delOne">删除某个事件</button>

    <div id="msg"></div>

    <script src="../static/plugins/jquery/jquery-3.3.1.min.js"></script>
    <script>
      $(function () {
        //获取鼠标位置
        $("body").mousemove(function (event) {
          //获取光标在页面上的X轴、Y轴的位置
          console.log(event.pageX, event.pageY);
        });

        //事件冒泡
        $("span").click(function (event) {
          var txt = $("#msg").html() + "<p>内层span元素被点击了</p>";
          $("#msg").html(txt);

          //事件类型
          //alert(event.type);

          //获取触发到的元素
          //alert(event.target);

          //停止事件冒泡
          //event.stopPropagation()
          //阻止默认行为
          //event.preventDefault()

          return false;
        });

        $("#content").click(function (event) {
          var txt = $("#msg").html() + "<p>外层div元素被点击了</p>";
          $("#msg").html(txt);

          //停止事件冒泡
          //event.stopPropagation();

          return false;
        });

        $("body").click(function (event) {
          var txt = $("#msg").html() + "<p>body元素被点击了</p>";
          $("#msg").html(txt);

          //停止事件冒泡
          //event.stopPropagation()

          return false;
        });

        //按钮的事件绑定
        $("#btn").click(function () {
          $("#msg").append("<p>我的绑定函数1</p>");
        });
        $("#btn").click(
          (fun1 = function () {
            $("#msg").append("<p>我的绑定函数2</p>");
          })
        );
        $("#btn").click(function () {
          $("#msg").append("<p>我的绑定函数3</p>");
        });

        //删除所有事件
        $("#delAll").click(function () {
          $("#btn").unbind("click");
        });

        //删除某个事件
        $("#delOne").click(function () {
          $("#btn").unbind("click", fun1);
        });

        //加载页面就触发事件的执行
        $("#btn").trigger("click");
      });
    </script>
  </body>
</html>
